<template>
  <div>
    <header>
      <div>
        <HandVue :left="true" :iconbool="false" :title="route.query.TextTitle" @back="goBack"></HandVue>
      </div>

      <ul class="tab" v-if="route.query.TextTitle === '限时兑换'">
        <li
          v-for="(item, index) in tabList"
          :key="item"
          @click="tabs(index)"
          :class="{ active: num === index }"
        >
          <p>{{ newtime }}</p>
          <p>{{ item }}:00</p>
          <p>{{StateArr[index]}}</p>
        </li>
      </ul>
    </header>
    <!-- <router-view></router-view> -->
    <ListSonVue :State="stateStr"></ListSonVue>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import ListSonVue from "./ListSon.vue";
import HandVue from "../../components/Hand.vue";
import dayjs from "dayjs";
import { ref } from "vue";
import { useListStore } from "../../stores/list.js";
const listStore = useListStore();


const router = useRouter();
const route = useRoute();
const newtime = dayjs().format("M月D日");
const nowTime = dayjs().format("HH");
const num = ref(0);



const tabList = [
  dayjs("2018-04-04 00:00:00").format("HH"),
  dayjs("2018-04-04 08:00:00").format("HH"),
  dayjs("2018-04-04 12:00:00").format("HH"),
  dayjs("2018-04-04 18:00:00").format("HH"),
  dayjs("2018-04-04 20:00:00").format("HH")
];
const StateArr = [];
function createState() {
  tabList.forEach(item => {
    const state = nowTime >= item ? "进行中" : "未开始";
    StateArr.push(state);
  });
}

createState();

const stateStr = ref({
  isSale:true
});
function tabs(val) {
  stateStr.value.isSale = StateArr[val]==='进行中';
  num.value = val;
  listStore.getInfo();
}
function goBack() {
  router.go(-1);
}
</script>

<style scoped>
header {
  background: #3ed2e2;
  color: white;
}

header > div > span {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-size: 5.333vw;
  font-weight: bold;
  line-height: 13.333vw;
}

.goLeft {
  font-size: 5.333vw;
  margin: 0 2.667vw;
}

.tab {
  display: flex;
  color: white;
}

.tab > li {
  flex: 1;
  text-align: center;
  padding: 1.333vw 0;
}

.active {
  color: #ff5e81;
  border-bottom: 0.533vw solid red;
  font-weight: 700;
}

.tab > li > p {
  font-size: 2.933vw;
}

.tab > li > p:nth-child(2) {
  font-size: 4vw;
}
</style>
